<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
        <title>Youtube</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="qrc:///web/css/jquery.mobile-1.4.5.min.css" />
    <script src="qrc:///web/js/jquery-1.11.1.min.js"></script>
    <script src="qrc:///web/js/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" href="qrc:///web/youtube/main.css" />

    <script src="qrc:///web/js/color-thief.min.js"></script>
    <link rel="stylesheet" href="qrc:///web/scroll.css" />
    <script src="qrc:///web/js/common.js"></script>
    <script src="qrc:///web/youtube/main.js"></script>


</head>
<!-- oncontextmenu="return false;" -->
<body  onselectstart="return false;" ondragstart="return false;" ondrop="return false;">

    <img style="display:none;" src="" id="coverImage" />

    <div class="ui-loader-background"> </div>


    <div id="manul_youtube_page" data-role="page" data-theme="b" data-title="YOUTUBE SEARCH">
        <div role="main" class="ui-content">
            <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle='false'>
                 <h1>Youtube</h1>
                <a id="home" onclick="$('.ui-content').fadeOut('slow');mainwindow.browse_youtube();" class="ui-btn-left ui-btn ui-shadow ui-corner-all ui-icon-home ui-btn-icon-notext">Home</a>
                <a id="settings" onclick="$('#settingsDialog').popup('open')" href="#" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn-right ui-btn ui-shadow ui-corner-all ui-icon-gear ui-btn-icon-notext">Settings</a>
            </div>
            <input class="ui-icon-alt"  type="search" id='manual_search' value='' placeholder="Your query...">
            <ul   class="list" id="manul_youtube_page_suggestions"  data-filter="true" data-input="#manual_search"  data-role="listview" data-split-icon="gear" data-split-theme="b" data-inset="true">
            <!-- load suggestions here -->
            </ul>
                <div id="result_div">
                    <!-- load data here -->
                </div>

            <hr>

            <div id="history_div">
                <h5 style="margin: 2px 0px 5px 5px;" id="history_valid">Your recent searches:</h5>
                <div id="history" class="ui-grid-b">
                    <!--load data here-->
                </div>
                <hr>
            </div>

            <div id="trending_div">
                <h5 style="margin: 2px 0px 5px 5px;" id="history_valid">Trending Music :</h5>
                <div class="ui-bar ui-bar-b ui-loader-trending" style="margin-top: 25px;text-align: center;margin-left:6px !important;"><i>Loading content please wait...</i></div>
                <div id="trending">
                    <!--load data here-->
                </div>
            </div>

        </div>
    </div>

<!--    page for related videos-->
    <div id="manul_youtube_related_page" data-role="page" data-theme="b" data-title="YOUTUBE SUGGESTIONS">
        <div role="main" class="ui-content">
            <div id="result_div">
                <!-- load data here -->
            </div>
            <hr>
            <div style="opacity:0.9" data-role="footer" data-position="fixed" data-tap-toggle="false">
                <a style="display: block;background-color: rgba(36, 142, 179, 0.5)" id="close_related" class="ui-mini ui-btn ui-icon-back ui-btn-icon-left ui-corner-all">Back</a>
            </div><!-- /footer -->
        </div>
    </div>

<!--settings dialog below-->
    <div data-history="false" data-tolerance="15" data-position-to="window"  data-role="popup" id="settingsDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
        <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
        <div class="ui-bar ui-bar-b" >
            <h4>Youtube Settings - Olivia</h4>
        </div>
        <div  class="ui-content" style="display:block !important;">
            <p>Selected Country :</p>
                <span id="currentCountry"></span>
            <hr style="margin: 12px 0px;">
            <p>Change Country :</p>
            <!-- search sites -->
            <form class="ui-filterable">
            <input id="rich-autocomplete-input_2" data-type="search" placeholder="Search country">
            </form>
            <ul id="countries_2" data-filter-reveal="true" data-role="listview" data-filter="true" data-inset="false" data-input="#rich-autocomplete-input_2">
                <script>
                $.each( countries, function( title, code ) {
                  $("#countries_2").append("<li class='country_item' onclick='youtube.saveGeo(\""+$.trim(code)+"\");$(this).siblings().addBack().addClass(\"ui-screen-hidden\")' data-filtertext='"+title+"'>"+title+"</li>");
                });
                </script>
            </ul>
            <hr style="margin-top: 30px;">
            <p>Clear recent searches :</p>
            <a data-mini="true" onclick="paginator.clearRecentSearches();mainwindow.browse_youtube()" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-delete ui-btn-icon-left" data-transition="flow">Clear</a>
        </div>
    </div>
    
</body>
</html>
